<template>
  <el-dialog :title="title" :visible.sync="visible" width="1000px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="题目类型" prop="questionType">
            <el-select v-model="form.questionType" placeholder="请选择题目类型" clearable style="width: 200px">
              <el-option v-for="(dict, index) in dict.type.topic_type" :key="index" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="重要性" prop="questionGrade">
            <el-select v-model="form.questionGrade" placeholder="请选择重要性" clearable style="width: 200px">
              <el-option v-for="(dict, index) in dict.type.grade" :key="index" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="难易程度" prop="questionEasy">
            <el-select v-model="form.questionEasy" placeholder="请选择难易程度" clearable style="width: 200px">
              <el-option v-for="(dict, index) in dict.type.difficulty" :key="index" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="难度系数" prop="questionDifficult">
            <el-input-number v-model="form.questionDifficult" :precision="2" :min="0" :max="1" :step="0.1" style="width: 120px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="能力层次" prop="capabilityLevel">
            <el-select v-model="form.capabilityLevel" placeholder="请选择能力层次" clearable style="width: 200px">
              <el-option v-for="(dict, index) in dict.type.capability_level" :key="index" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="分值" prop="score">
            <el-input-number v-model="form.score" :precision="0" :min="0" :max="100" :step="1" style="width: 120px" />
            <span>分</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="相关性" prop="relevance">
            <el-input v-model="form.relevance" maxlength="20" style="width: 200px" placeholder="请输入相关性" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="考核内容" prop="examine">
            <el-input v-model="form.examine" maxlength="20" style="width: 200px" placeholder="请输入考核内容" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="选项内容">
        <TinymceEditor v-if="visible" v-model="form.questionContent" :height="400" />
      </el-form-item>
      <el-form-item label="答案">
        <TinymceEditor v-if="visible" v-model="form.answer" :height="300" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getJuanQuestion, updateJuanQuestion } from "@/api/juan/juanQuestion";
import TinymceEditor from "@/components/TinymceEditor";

export default {
  name: "EditDialog",
  components: { TinymceEditor },
  dicts: ["topic_type", "difficulty", "grade", "capability_level"],
  data() {
    return {
      // 弹出层标题
      title: "",
      buttonLoading: false,
      // 是否显示弹出层
      visible: false,
      questionId: null,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        questionType: [{ required: true, message: "题目类型不能为空", trigger: "change" }],
        questionDifficult: [{ required: true, message: "难度系数不能为空", trigger: "blur" }],
        questionEasy: [{ required: true, message: "难易程度不能为空", trigger: "blur" }],
        capabilityLevel: [{ required: true, message: "能力层次不能为空", trigger: "blur" }],
        score: [{ required: true, message: "分值不能为空", trigger: "blur" }],
        questionMajor: [{ required: true, message: "专业不能为空", trigger: "blur" }],
        questionSubject: [{ required: true, message: "题干不能为空", trigger: "blur" }],
        questionContent: [{ required: true, message: "选项内容不能为空", trigger: "blur" }],
        createdBy: [{ required: true, message: "创建人不能为空", trigger: "blur" }],
        createdTime: [{ required: true, message: "创建时间不能为空", trigger: "blur" }],
        updatedBy: [{ required: true, message: "更新人不能为空", trigger: "blur" }],
        updatedTime: [{ required: true, message: "更新时间不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    open(questionId) {
      this.reset();
      this.loading = true;
      this.questionId = questionId;

      getJuanQuestion(this.questionId).then((response) => {
        this.loading = false;
        this.form = response.data;
        this.visible = true;
        this.title = "修改题目";
      });
    },
    // 表单重置
    reset() {
      this.form = {
        questionId: undefined,
        courseId: undefined,
        chapterId: undefined,
        knowledgeId: undefined,
        questionCode: undefined,
        questionType: undefined,
        questionDifficult: undefined,
        questionEasy: undefined,
        questionMajor: undefined,
        questionGrade: undefined,
        questionSubject: undefined,
        questionContent: undefined,
        createdBy: undefined,
        createdTime: undefined,
        updatedBy: undefined,
        updatedTime: undefined,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;

          let options = {
            questionId: this.questionId,
            ...this.form,
          };

          updateJuanQuestion(options)
            .then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.visible = false;
              this.$emit("confirm", options);
            })
            .finally(() => {
              this.buttonLoading = false;
            });
        }
      });
    },
    cancel() {
      this.visible = false;
      this.reset();
    },
  },
};
</script>
<style lang="scss" scoped></style>
